import ShopModel from './template/ShopModel'
import { getShopListByState } from '../../api/shop'
import {
    Button,
    Drawer,
    Image,
    Input,
    notification,
    Popconfirm,
    Space,
    Spin,
    Switch,
    Table,
    Tooltip
} from 'antd'
import React from 'react'
import AddShop from './AddShop'
import QueueAnim from 'rc-queue-anim'
import { connect } from 'react-redux'

class Recommend extends ShopModel {
    componentDidMount () {
        this.isUnload = false
        this.getCategory()
        this.getBanner()
        this.updateData()
    }

    updateData () {
        getShopListByState('isrecommend').then(res => {
            this.allData = res.data
            if(this.allData.length>10){
                if (!localStorage.getItem('overflowRecommend')) {
                    const key = `open${Date.now()}`
                    notification.warning({
                        message: '推荐商品超量',
                        description:// eslint-disable-next-line
                            '客户端只会推荐10条商品，也就是第一页的商品，第二页以及后的内容都不会推荐给客户',
                        duration: null,
                        // eslint-disable-next-line
                        btn: <a onClick={() => {
                            notification.close(key)
                            localStorage.setItem('overflowRecommend', true)
                        }}>不再提示</a>,
                        key
                    })
                }
            }
            if (this.state.searchValue) {
                this.searchData(this.state.searchValue)
            } else {
                this.setState({
                    dataSource: res.data,
                    loading: false
                })
            }
        })
    }

    render () {
        let { loading } = this.state
        let element = null
        const columns = [
            {
                title: '序号',
                key: 'index',
                fixed: 'left',
                width: 80,
                render: (text, record, index) => index + 1,
            },
            {
                title: '商品名称',
                fixed: 'left',
                width: 200,
                dataIndex: 'proname',
                key: 'proname',
                // eslint-disable-next-line
                render: (text, record) => <a onClick={this.copyWhenClick.bind(this, record.proid)}>{text}</a>
            },
            {
                title: <Tooltip title="点击右面漏斗进行筛选">商品分类</Tooltip>,
                width: 120,
                dataIndex: 'category',
                filters: [...this.state.category],
                onFilter: (value, record) => record.category === value,
                key: 'category',
            },
            {
                title: <Tooltip title="点击右面漏斗进行筛选">商品品牌</Tooltip>,
                width: 120,
                dataIndex: 'brand',
                filters: [...this.state.brand],
                onFilter: (value, record) => record.brand === value,
                key: 'brand',
            },
            {
                title: '商品图片',
                width: 120,
                dataIndex: 'swiper',
                key: 'swiper',
                render: (value) => <Image key="img" src={value[0]} width={100} height={100} placeholder={
                    <Image
                        preview={false}
                        src="https://web.chengqige.com/vipshop/v1/dist/static/loading.gif"
                        width={100}
                        height={100}
                    />
                }/>
            },
            {
                title: '商品原价',
                width: 120,
                dataIndex: 'originprice',
                sorter: (a, b) => a.originprice - b.originprice,
                key: 'originprice'
            },
            {
                title: '商品折扣',
                width: 120,
                dataIndex: 'discount',
                sorter: (a, b) => a.discount - b.discount,
                key: 'discount'
            },
            {
                title: '销量',
                width: 120,
                dataIndex: 'sales',
                sorter: (a, b) => a.sales - b.sales,
                key: 'sales'
            },
            {
                title: '推荐',
                width: 80,
                fixed: 'right',
                dataIndex: 'isrecommend',
                key: 'isrecommend',
                filters: [{ text: '推荐产品', value: true }, { text: '非推荐产品', value: false }],
                onFilter: (value, record) => record.isrecommend === value,
                render: (text, record, index) => (<Switch size={'small'} checked={record.isrecommend}
                                                          onClick={this.modifyCheckState.bind(this, record.isrecommend, record.proid, 'isrecommend', index)}/>)
            },
            {
                title: '操作',
                key: 'action',
                width: 150,
                fixed: 'right',
                render: (text, record, index) => (
                    <Space size="middle" key="action">
                        <Button size={'small'} onClick={this.edit.bind(this, record.proid)}>
                            编辑
                        </Button>
                        <Popconfirm onConfirm={this.delete.bind(this, record.proid)} title="确认删除商品嘛？">
                            <Button size={'small'} danger>
                                删除
                            </Button>
                        </Popconfirm>
                    </Space>)
            }
        ]
        if (loading) {
            element = <div className="loading">
                <Spin tip="Loading..." spinning={loading} size="large"/>
            </div>
        } else {
            element = <div>
                <Space style={{ width: '100%' }} direction="vertical">
                    <Input.Search allowClear style={{ width: '20%' }} placeholder="请输入名称或ID"
                                  onSearch={this.searchData.bind(this)}
                                  onChange={this.resetData.bind(this)}/>
                    <Table style={{ width: '100%' }} dataSource={this.state.dataSource} columns={columns}
                           scroll={{ y: this.state.tableHeight }} rowKey={record => record.proid}/>
                </Space>
                <Drawer className="EditModel" visible={this.state.editVisible} width={500} title="编辑商品数据"
                        onClose={this.handerEditVisible.bind(this)} footer={null}>
                    <AddShop cb={this.refresh.bind(this)} edit={true} initData={this.state.editRow}
                             proid={this.state.proid}/>
                </Drawer>
            </div>
        }

        return (<QueueAnim className="demo-content" key="demo">
            {this.props.show ? <div className="demo-tbody" key="a">{element}</div> : null}
        </QueueAnim>)
    }
}

export default connect((state) => {
    return {
        show: state.getIn(['fade', 'show'])
    }
})(Recommend)
